<!--
 * @Author: zqg
 * @Date: 2021-01-10 23:12:18
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-08 15:44:31
 * @Description: 新增/编辑考核规则-绩效规则内容
-->
<template>
  <el-form
    :model="addAppraisalQuery"
    :rules="rules"
    ref="formRef"
    label-width="100px"
    class="demo-ruleForm"
    label-position="right"
  >
    <el-form-item label-width="0">
      <el-col :span="8">
        <el-form-item label="可叠加条件:" prop="performanceType">
          <el-checkbox
            :value="addAppraisalQuery.performanceType === '提成'"
            :true-label="'提成'"
            :false-label="'提成'"
            @change="ckeckChange"
            ><img
              class="check-svg"
              src="../../../../../../assets/icon/jiahao.svg"
              alt=""
            /><span class="check-title">提成</span></el-checkbox
          >
          <el-checkbox
            :value="addAppraisalQuery.performanceType === '扣除'"
            :true-label="'扣除'"
            :false-label="'扣除'"
            @change="ckeckChange"
            ><img
              class="check-svg"
              src="../../../../../../assets/icon/jianhao.svg"
              alt=""
            /><span class="check-title">扣除</span></el-checkbox
          >
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label-width="0">
      <el-col :span="12">
        <el-form-item label="金额规则:" prop="performanceAmountRule">
          <el-select
            v-model="addAppraisalQuery.performanceAmountRule"
            placeholder="请选择金额规则"
          >
            <el-option
              v-for="item in Object.values(amountRules)"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="金额:" required>
      <el-row :gutter="10">
        <el-col
          :span="4"
          v-show="
            addAppraisalQuery.performanceAmountRule === amountRules.fixed.value
          "
        >
          <el-form-item label-width="0" prop="performanceAmount">
            <el-input
              v-model="addAppraisalQuery.performanceAmount"
              placeholder="请输入金额"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="4"
          v-show="
            addAppraisalQuery.performanceAmountRule !== amountRules.fixed.value
          "
        >
          <el-form-item label-width="0" prop="performanceTarget">
            <el-select
              v-model="addAppraisalQuery.performanceTarget"
              placeholder="请选择指标值"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="4"
          v-show="
            addAppraisalQuery.performanceAmountRule !== amountRules.fixed.value
          "
        >
          <el-form-item label-width="0" prop="performanceComputingMethod">
            <el-select v-model="addAppraisalQuery.performanceComputingMethod">
              <el-option
                v-for="item in formulaOption"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="4"
          v-show="
            addAppraisalQuery.performanceAmountRule !== amountRules.fixed.value
          "
        >
          <el-form-item label-width="0" prop="performanceValue">
            <el-input
              v-model="addAppraisalQuery.performanceValue"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="4"
          v-show="
            addAppraisalQuery.performanceAmountRule !== amountRules.fixed.value
          "
        >
          <el-form-item label-width="0" prop="performanceUnit">
            <el-select v-model="addAppraisalQuery.performanceUnit">
              <el-option
                v-for="item in amountUnit"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="规则说明:" prop="remark">
      <el-input
        type="textarea"
        placeholder="说明：维修产值一般指当所有工单总产值超过预期目标或者达到部分预期目标的指标产值时为对应岗位员工进行绩效提成奖励。"
        v-model="addAppraisalQuery.remark"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { assessmentTypeOption, parameterTypeOption } from '@/utils/performance'
export default {
  data() {
    return {
      options: assessmentTypeOption.concat(parameterTypeOption),
      addAppraisalQuery: {
        // 绩效金额(固定金额(填写) || 计算金额)
        performanceAmount: '',
        // 绩效金额规则(固定金额 || 计算金额)
        performanceAmountRule: '',
        // 计算方法(+ || — || * || /)
        performanceComputingMethod: '',
        // 绩效指标
        performanceTarget: '',
        // 绩效类型(提成 || 扣除)
        performanceType: '',
        // 绩效单位
        performanceUnit: '',
        // 绩效值
        performanceValue: '',
        // 规则说明
        remark: ''
      },
      // 金额规则枚举
      amountRules: {
        fixed: {
          value: '固定金额'
        },
        computed: {
          value: '计算金额'
        }
      },
      // 算式枚举
      formulaOption: [
        {
          id: '*',
          value: '乘(*)'
        },
        {
          id: '/',
          value: '除(/)'
        },
        {
          id: '+',
          value: '加(+)'
        },
        {
          id: '-',
          value: '减(-)'
        }
      ],
      // 金额单位
      amountUnit: ['%', '元']
    }
  },
  props: {
    // 新增规则信息详情
    rulesDetail: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    addAppraisalQuery: {
      handler(value) {
        this.$emit('change', value)
      },
      deep: true
    }
  },
  computed: {
    // 验证规则
    rules() {
      return {
        performanceAmount: [
          {
            required:
              this.addAppraisalQuery.performanceAmountRule ===
              this.amountRules.fixed.value,
            message: '请输入金额'
          }
        ],
        performanceAmountRule: [
          {
            required: true,
            message: '请选择金额规则'
          }
        ],
        performanceComputingMethod: [
          {
            required:
              this.addAppraisalQuery.performanceAmountRule !==
              this.amountRules.fixed.value,
            message: '请选择计算方式'
          }
        ],
        performanceTarget: [
          {
            required:
              this.addAppraisalQuery.performanceAmountRule !==
              this.amountRules.fixed.value,
            message: '请选择指标类型'
          }
        ],
        performanceType: [
          {
            required: true,
            message: '请勾选绩效类型'
          }
        ],
        performanceUnit: [
          {
            required:
              this.addAppraisalQuery.performanceAmountRule !==
              this.amountRules.fixed.value,
            message: '请选择单位'
          }
        ],
        performanceValue: [
          {
            required:
              this.addAppraisalQuery.performanceAmountRule !==
              this.amountRules.fixed.value,
            message: '请输入内容'
          }
        ]
      }
    }
  },
  created() {
    Object.keys(this.addAppraisalQuery).forEach(key => {
      if (this.rulesDetail.hasOwnProperty(key) && this.rulesDetail[key]) {
        this.$set(this.addAppraisalQuery, key, this.rulesDetail[key])
      }
    })
  },
  methods: {
    clear() {
      this.addAppraisalQuery = {
        performanceAmount: '',
        performanceAmountRule: '',
        performanceComputingMethod: '',
        performanceTarget: '',
        performanceType: '',
        performanceUnit: '',
        performanceValue: '',
        remark: ''
      }
    },
    /**
     * @description: 复选框选择状态修改处理
     * @param {boolean} value
     * @return {*}
     */
    ckeckChange(value) {
      this.addAppraisalQuery.performanceType = value
    },
    /**
     * @description: 表单验证
     * @return {Promise<Boolean>}
     */
    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(valid => {
          resolve(valid)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.check-svg {
  width: 20px;
  vertical-align: middle;
}
.check-title {
  vertical-align: middle;
}
</style>
